<template>
  <mind-map-header @add-same-node="addSameNode" @add-child-node="addChildNode" @export-pdf="exportPdf" @save="save"></mind-map-header>
  <div style="width: 100%; height: calc(100% - 80px)">
    <div class="mindMapContainer" ref="mindMapContainerRef"></div>
  </div>
  <mind-map-footer></mind-map-footer>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import MindMap from 'simple-mind-map';
import MindMapFooter from './components/footer/index.vue';
import MindMapHeader from './components/header/index.vue';
//@ts-expect-error
import Export from 'simple-mind-map/src/plugins/Export.js';
MindMap.usePlugin(Export);
defineOptions({
  name: 'DwMindMap',
});
//注册插件
const mindMapContainerRef = ref();
let mindMap: MindMap | undefined = undefined;
async function init() {
  mindMap = new MindMap({
    el: mindMapContainerRef.value,
    data: {
      data: {
        text: '鹿鲸项目管理工具',
      },
      children: [
        {
          data: { text: '工作台' },
        },
        {
          data: { text: '项目管理' },
        },
        {
          data: { text: '开发管理' },
        },
        {
          data: { text: '软件测试' },
        },
        {
          data: { text: '运维中心' },
        },
        {
          data: { text: '系统管理' },
        },
      ],
    },
    //@ts-expect-error
    watermarkConfig: {
      text: '鹿鲸项目管理工具——思维导图',
      onlyExport: false,
      lineSpacing: 100,
      textSpacing: 100,
      angle: 30,
      textStyle: {
        color: '#000',
        opacity: 0.5,
        fontSize: 14,
      },
    },
  });
}

onMounted(() => {
  init();
  mindMap?.execCommand('INSERT_CHILD_NODE', false, [], {
    uid: '1111',
  });
});
const addChildNode = () => {
  if (mindMap) mindMap.execCommand('INSERT_CHILD_NODE');
};
const addSameNode = () => {
  if (mindMap) mindMap.execCommand('INSERT_NODE');
};
const save = () => {
  if (mindMap) {
    const data = mindMap.getData(true);
    alert(JSON.stringify(data));
  }
};
const exportPdf = () => {
  if (mindMap) {
    mindMap.export('smm', true, '文件名', true);
  }
};
</script>
<style lang="scss" scoped>
.mindMapContainer {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>
